<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>订单管理</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">订单编号</label>
						<div class="layui-input-inline">
							<input type="text" name="keywords" placeholder="请输入关键字"
								class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">起始时间</label>
						<div class="layui-input-inline">
							<input type="date" name="begindate" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">结束时间</label>
						<div class="layui-input-inline">
							<input type="date" name="enddate" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
							lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i> 查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i> 重置
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-card">
		<div class="layui-card-body">
			<table id="orders-table" lay-filter="orders-table"></table>
		</div>
	</div>

	<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        删除
		    </button>
		</script>

	<script type="text/html" id="user-bar">

			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit">详情</i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

	<script type="text/html" id="goods-enable">
			<input type="checkbox" name="goodsstate" value="{{d.goodsstate}}" lay-skin="switch" lay-text="上架|下架"  lay-filter="goods-enable" {{d.goodsstate==1?'checked':''}}>
		</script>


	<script type="text/html" id="order-createTime">
			{{layui.util.toDateString(d.orderdate, 'yyyy-MM-dd HH:mm')}}
		</script>

	<script src="../../component/layui/layui.js"></script>
	<script src="../../component/pear/pear.js"></script>
	<!-- 	弹窗插件js -->
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

	<script>
		layui.use([ 'table', 'form', 'jquery', 'common' ], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;

			let MODULE_PATH = "";

			let cols = [ [ {
				type : 'checkbox'
			}, {
				title : '订单编号',
				field : 'orderid',
				align : 'center',
				width : 200
			}, {
				title : '商品数量',
				field : 'ordersum',
				align : 'center'
			}, {
				title : '订单状态',
				field : 'orderstate',
				align : 'center',
				templet : function(d) {
					if(d.orderstate==0)
						{
						return "未支付";
						}
					else if(d.orderstate==1){
						return "已支付";
					}else if(d.orderstate==2){
						return "已发货";
					}else if(d.orderstate==3){
						return "已收货";
					}
					return "已取消";
				}
			}, {
				title : '下单用户',
				field : 'userid',
				align : 'center'

			}, {
				title : '订单总额',
				field : 'total',
				align : 'center'

			}, {
				title : '下单时间',
				field : 'orderdate',
				align : 'center',
				templet : '#order-createTime'
			}, {
				title : '操作',
				toolbar : '#user-bar',
				align : 'center',
				width : 180
			} ] ]

			//table 获取数据 json
			table.render({
				elem : '#orders-table',
				url : '../../../orders.do',
				page : true,
				cols : cols,
				skin : 'line',
				toolbar : '#user-toolbar',
				defaultToolbar : [ {
					title : '刷新',
					layEvent : 'refresh',
					icon : 'layui-icon-refresh',
				}, 'filter', 'print', 'exports' ]
			});

			table.on('tool(orders-table)', function(obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'detail') {
					window.detail(obj);
				}
			});

			table.on('toolbar(orders-table)', function(obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				} else if (obj.event === 'batchRemove') {
					window.batchRemove(obj);
				}
			});

			//layui 中表单事件 form.on ...
			//submit 提交 表单?  lay-filter="user-query"
			form.on('submit(user-query)', function(data) {
				//事件发生，是否是按钮被点击 data.field 表单中的参数信息 {}
				console.log(data.field);
				table.reload('orders-table', {
					where : data.field,
					page : {
						curr : 1
					//每次点击按钮 重新从第 1 页开始
					}
				})
				return false; //设置表单不提交
			});

			//switch 开关
			form.on('switch(goods-enable)', function(obj) {
				//layer.tips
				//layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

				//this.value ->userid
				//this.name userstate
				//obj.elem.chekced true =>1  false=>0

				// console.log(obj.elem.checked);
				let userstate = obj.elem.checked ? 1 : 0;
				console.log(userstate);
				$.ajax({
					url : '../../../users.do?op=updateState&userid='
							+ this.value + "&userstate=" + userstate,
					type : 'post',
					success : function(res) {
						console.log(res);
						//layer.msg(res.msg);
						layer.alert(res.msg == 'success' ? '修改成功' : '修改失败');
					}
				});

			});

			window.add = function() {
				layer.open({
					type : 2,
					title : '新增',
					shade : 0.1,
					area : [ common.isModile() ? '100%' : '500px',
							common.isModile() ? '100%' : '400px' ],
					content : MODULE_PATH + 'add.html'
				});
			}

			window.detail = function(obj) {
				console.log(obj.data);
				//swal(obj.data.goodsname,obj.data.goodsinfo);
				swal({
					title : obj.data.goodsname,
					text : obj.data.goodsinfo,
					icon : '/jja2103_zmall_v2/back/admin/images/logo.png'

				});
			}

			//点击详情按钮执行函数
			window.edit = function(obj) {
				console.log(obj.data);
				//将orderid信息存储到localStorage
				localStorage.setItem("orderid", obj.data.orderid);
			

				//layer.open 弹窗,指向的是一个edit.html
				layer.open({
					type : 2,
					title : '订单详情',
					shade : 0.1,
					area : [ '1200px', '600px' ],
					content : MODULE_PATH + 'ordersdetail.html'
				});
			}

			window.remove = function(obj) {
				layer.confirm('确定要删除该用户', {
					icon : 3,
					title : '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url : MODULE_PATH + "remove/" + obj.data['userId'],
						dataType : 'json',
						type : 'delete',
						success : function(result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon : 1,
									time : 1000
								}, function() {
									obj.del();
								});
							} else {
								layer.msg(result.msg, {
									icon : 2,
									time : 1000
								});
							}
						}
					})
				});
			}

			window.batchRemove = function(obj) {

				var checkIds = common.checkField(obj, 'userId');

				if (checkIds === "") {
					layer.msg("未选中数据", {
						icon : 3,
						time : 1000
					});
					return false;
				}

				layer.confirm('确定要删除这些用户', {
					icon : 3,
					title : '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						url : MODULE_PATH + "batchRemove/" + ids,
						dataType : 'json',
						type : 'delete',
						success : function(result) {
							layer.close(loading);
							if (result.success) {
								layer.msg(result.msg, {
									icon : 1,
									time : 1000
								}, function() {
									table.reload('orders-table');
								});
							} else {
								layer.msg(result.msg, {
									icon : 2,
									time : 1000
								});
							}
						}
					})
				});
			}

			window.refresh = function(param) {
				table.reload('orders-table');
			}
		})
	</script>
</body>
</html>
